<style lang="less" scoped>
.pdflist{
    .pdflist_data{
      background: white;
      padding-left: 0.5vw;
      padding-right: 0.5vw;
      width: 61vw;
      margin-left: 18.5vw;
      .title{
        font-size: 1.1vw;
      }
      .pdfitemimg{
        background-image: url(../../../images/xinghao.png);
        background-size:100% 100%;
        width: 1.5vw;
        height: 1.5vw;
        margin-left: 2vw;
      }
      .pdfitemtitle{
        font-size: 0.85vw;
        line-height: 1.5vw;
        margin-left: 2vw;
      }
      .pdfitem_data{
        position:relative;
        cursor:pointer;
        margin-top: 1vw;
      }
      .pdfitemtitle:hover{
        color: #fa4400;
      }
      .pdflist_b{
        background-image: url(../../../images/ditu3.jpg);
        background-size:100% 100%;
        width: 61vw;
        min-height: 39vw;
      }
  }
}
.xiazai{
    position: absolute;
    background-image: url(../../../images/pdfxiazai.png);
    background-size:100% 100%;
    // width:494px;
    // height: 576px;
    width:1.5vw;
    height: 0.85vw;
    left:27.5vw;
    top: 0.3vw;
    cursor:pointer;
  }
  .xaizaiimg{
    position: absolute;
    left:26vw;
    top: 0.3vw;
    width: 1.37vw;
    height: 0.9vw;
    cursor:pointer;
  }

</style>
<template>
  <div class="pdflist">
    <MainUser></MainUser>

    <MainTitle ></MainTitle>
    
    <div class="pdflist_data" >
      <div style="height:0.5vw;"></div>
        <div class="title" v-html="title"></div>
        <div class="pdflist_b" v-loading="loading">
          <el-row :gutter="20" >
            <el-col :span="12" >
              <div v-if="test_reportslist1.length == 0" class="pdfitem_data"></div>
              <div v-for="item in test_reportslist1" class="pdfitem_data" >
                <div class="pdfitemtitle" v-html="item.title" @click="dakaipdf(item.id)"></div>
                <el-image
                  v-if="type == 2"
                  class="xaizaiimg"
                  :src="xiazaiimg"
                  :fit="cover" @click="xiazai(item.id)"></el-image>
                <!-- <div class="xiazai" v-if="type == 2" @click="xiazai(item.id)"></div> -->
              </div>
            </el-col>
            <el-col :span="12" >
              <div   v-for="item in test_reportslist2" class="pdfitem_data">
                <div class="pdfitemtitle" v-html="item.title" @click="dakaipdf(item.id)"></div>
                <el-image
                  v-if="type == 2"
                  class="xaizaiimg"
                  :src="xiazaiimg"
                  :fit="'cover'"
                  @click="xiazai(item.id)"></el-image>
                <!-- <div class="xiazai" v-if="type == 2" @click="xiazai(item.id)"></div> -->
              </div>
            </el-col>
          </el-row>
        </div>
        <div style="height:1vw"></div>
        <el-pagination
          background
          style="text-align: right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="prev, pager, next,sizes"
          :current-page="pagintion.page"
          :page-sizes="pagesizes"
          :page-size="pagintion.page_size"
          :total="pagintion.total">
        </el-pagination>
        <div style="height:1vw"></div>
    </div>
    
  </div>
</template>
<script>
const link = document.createElement('a')
import { test_reports,test_report,assumeRole } from '@/request/api';
import MainTitle from '../main_title'
import MainUser from '../main_user'
export default {
    data() {
        return {
          xiazaiimg:require('../../../images/pdfxiazai.png'),
          test_reportslist1:[],
          test_reportslist2:[],
          loading:false,
          size:0,
          type:0,
          title:"",
          pagintion: {
            total: 0,
            page_size:15,
            page: 1,
          },
          pagesizes: [15],
        }
    },
    mounted() {
      this.type = this.$route.query.type;
      if(this.type == 2){
        this.title="检测报告";
      }else if(this.type == 3){
        this.title="自学课件";
      }
      this.gettest_reportslist();
      if(this.type == 2){
        this.getAssumeRole();
      }
    },

    methods: {
      //翻页
      handleCurrentChange(val) {
        this.pagintion.page = val;
        this.gettest_reportslist();
      },
      //修改条数
      handleSizeChange(val){
        this.pagintion.page_size = val;
        this.gettest_reportslist();
      },
      //获取小概念pdf列表
      gettest_reportslist(){
          var param = {};
          param.page = this.pagintion.page;
          param.size = this.pagintion.page_size;
          this.pagintion.total = 0;
          if(this.type == 2){
            param.type = 2;
          }else if(this.type == 3){
            param.type = 5;
          }
          this.loading = true;
          test_reports(param).then(res => {
            this.loading = false;
            if(res.ok){
              if(this.pagintion.total < res.data.total){
                this.pagintion.total = res.data.total;
              }
              this.test_reportslist1 = res.data.data;
            }
          });
          if(this.type == 2){
            param.type = 4;
          }else if(this.type == 3){
            param.type = 3;
          }
          test_reports(param).then(res => {
            this.loading = false;
            if(res.ok){
              if(this.pagintion.total < res.data.total){
                this.pagintion.total = res.data.total;
              }
              this.test_reportslist2 = res.data.data;
            }
          });
      },
      dakaipdf(id){
        let routeUrl = this.$router.resolve({
          path: 'jlb_xgnpdf',
          query: {'id': id}
        });
        window.open(routeUrl.href, '_blank');
      },
      xiazai(id){
        test_report({id:id}).then(res => {
            if(res.ok){
                // res.data.attachment = '/designer/Hk9d4VYg_卡诺亚橱柜技术手册 2021.08.11.pdf';
                var attachment = res.data.attachment[0];
                this.download(attachment);
                
                // this.loadpdf();
            }
        })
      },
      download(attachment){
          var extention = attachment.split('/').pop();
          // 配置响应头实现通过URL访问时自动下载文件，并设置下载后的文件名。
          const filename = extention // 自定义下载后的文件名。
          const response = {
              'content-disposition': `attachment; filename=${encodeURIComponent(filename)}`
          }
          // 填写Object完整路径。Object完整路径中不能包含Bucket名称。
          const url = this.client.signatureUrl(attachment, { response });
          link.href = url;
          link.click() // 下载文件
          URL.revokeObjectURL(url); // 释放内存
        },
        getAssumeRole(){
          assumeRole({}).then(res => {
              if(res.ok){
                  var assumedata = res.data.res;
                  let OSS = require('ali-oss');
                  this.client = new OSS({
                      // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
                      region: 'oss-cn-qingdao',
                      // 从STS服务获取的临时访问凭证。临时访问凭证包括临时访问密钥（AccessKeyId和AccessKeySecret）和安全令牌（SecurityToken）。
                      accessKeyId: assumedata.Credentials.AccessKeyId,
                      accessKeySecret: assumedata.Credentials.AccessKeySecret,
                      stsToken: assumedata.Credentials.SecurityToken	,
                      // 填写Bucket名称。
                      bucket: 'kny-sxy'
                  });
              }
          })
        },
    },
    components: {
        MainTitle,
        MainUser
    },

}
</script>
